<template>
  <el-dialog
    class="schedule-history-comp"
    title="变更记录"
    :close-on-click-modal="false"
    :visible="visible"
    :width="$setRem(800)"
    :before-close="handleCancel">
    <div class="content">
      <el-table
        class="table-container"
        :data="tableData"
        v-loading="tableLoading"
        element-loading-custom-class="custom-load"
        style="width: 100%"
        row-key="id">
        <el-table-column label="序号" type="index" width="80"></el-table-column>
        <el-table-column label="任务历史名称" prop="scheduleName"></el-table-column>
        <el-table-column label="计划开始时间" prop="planStartTime"></el-table-column>
        <el-table-column label="计划完成时间" prop="planEndTime"></el-table-column>
        <el-table-column label="变更时间" prop="modifyTime"></el-table-column>
        <div class="empty-content" slot="empty">
          <i class="iconfont iconwushuju"></i>
          <p>暂无数据</p>
        </div>
      </el-table>
      <el-pagination
        v-if="total > 10"
        :page-size="pageSize"
        :current-page="pageNo"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    },
    type: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tableData: [],
      tableLoading: false,
      pageSize: 10,
      pageNo: 1,
      total: 0
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableData();
        return;
      }
      this.tableLoading = false;
      this.tableData = [];
      this.pageNo = 1;
      this.pageSize = 10;
      this.total = 0;
    }
  },
  methods: {
    async getTableData() {
      if (!this.id) return;
      const params = {
        // pageSize: this.pageSize,
        // pageNum: this.pageNo,
        id: this.id
      };
      this.tableLoading = true;
      const { success, data: {
        data
      }} = this.type === 'water'
        ? await this.$Model.getWaterScheduleChangeList(params)
        : await this.$Model.getScheduleChangeList(params);
      this.tableLoading = false;
      if (success && data) {
        this.tableData = data || [];
      }
    },
    /**
     * pageSize 改变时会触发
     * @param pageSize 每页条数
     */
    handleSizeChange(pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.getTableData();
    },
    /**
     * currentPage 改变时会触发
     * @param pageNo 当前页
     */
    handleCurrentChange(pageNo) {
      this.pageNo = pageNo;
      this.getTableData();
    },
    // 关闭、取消
    handleCancel() {
      this.$emit('cancel');
    },
  }
};
</script>

<style scoped lang="scss">
  @import "../../../assets/styles/dialog";
  @import "../../../assets/styles/table";

  .schedule-history-comp {
    width: 100%;
    .table-container {
      /deep/ .el-table__body-wrapper {
        min-height: 300px;
        max-height: 500px;
        overflow-y: auto;
      }
    }
  }
</style>
